<template>
  <view class="invite-container">
    <!-- 头部导航 -->
    <view class="header">
      <image src="@/static/images/invite/back-icon@3x.png" class="back-icon" @click="goBack" />
      <text class="header-title">邀请有礼</text>
      <view class="header-placeholder"></view>
    </view>

    <!-- 滚动内容 -->
    <scroll-view class="content" scroll-y>
      <!-- 邀请卡片 -->
      <view class="invite-card">
        <view class="invite-bg-decoration">
          <view class="decoration-circle circle-1"></view>
          <view class="decoration-circle circle-2"></view>
          <view class="decoration-circle circle-3"></view>
        </view>

        <view class="invite-content">
          <view class="invite-icon-wrapper">
            <image src="@/static/images/user/icon-invite.png" class="invite-icon" />
          </view>

          <text class="invite-title">邀请好友，赢取奖励</text>
          <text class="invite-desc">
            每成功邀请一位好友并解锁高级服务，即可获得现金奖励，还能享受好友交易分成收益！
          </text>

          <view class="invite-benefits">
            <view class="benefit-item">
              <text class="benefit-icon">💰</text>
              <text class="benefit-text">现金奖励</text>
            </view>
            <view class="benefit-item">
              <text class="benefit-icon">📈</text>
              <text class="benefit-text">收益分成</text>
            </view>
            <view class="benefit-item">
              <image src="@/static/images/user/icon-vip-badge.png" class="benefit-icon-img" />
              <text class="benefit-text">VIP特权</text>
            </view>
          </view>

          <view class="invite-btn" @click="inviteFriends">
            <view class="btn-content">
              <text class="btn-icon">🎁</text>
              <text class="invite-btn-text">立即邀请</text>
            </view>
            <view class="btn-glow"></view>
          </view>
        </view>
      </view>

      <!-- 统计信息 -->
      <view class="stats-section">
        <view class="stats-item">
          <view class="stats-icon-wrapper">
            <image src="/static/images/invite/friends-icon.png" class="stats-icon" />
          </view>
          <view class="stats-content">
            <text class="stats-number">{{ inviteCount }}</text>
            <text class="stats-label">已邀请好友</text>
          </view>
          <view class="stats-trend up">
            <image src="/static/images/invite/trend-up.png" class="trend-icon" />
            <text class="trend-text">+{{ recentInvites }}</text>
          </view>
        </view>

        <view class="stats-divider"></view>

        <view class="stats-item">
          <view class="stats-icon-wrapper">
            <image src="/static/images/invite/earning-icon.png" class="stats-icon" />
          </view>
          <view class="stats-content">
            <text class="stats-number">{{ totalEarnings }}</text>
            <text class="stats-label">累计收益(USDT)</text>
          </view>
          <view class="stats-trend up">
            <image src="/static/images/invite/trend-up.png" class="trend-icon" />
            <text class="trend-text">+{{ recentEarnings }}</text>
          </view>
        </view>
      </view>

      <!-- 我的奖励 -->
      <view class="experiment-section">
        <view class="experiment-header">
          <text class="section-title">我的奖励</text>
        </view>
        <view class="progress-info">
          <text class="progress-label">段位进度</text>
          <text class="progress-value">{{ inviteCount }}/{{ maxProgress }}位好友</text>
        </view>

        <!-- 段位进度条 -->
        <view class="rank-progress-container">
          <!-- 进度条背景 -->
          <view class="progress-track">
            <!-- 进度填充 -->
            <view class="progress-fill" :style="{ width: progressPercentage + '%' }"></view>

            <!-- 段位标记点 -->
            <view
              v-for="(level, index) in rankLevels"
              :key="index"
              class="rank-marker"
              :class="{
                'completed': inviteCount >= level.requirement,
                'current': inviteCount >= level.requirement && inviteCount < (rankLevels[index + 1]?.requirement || 999)
              }"
              :style="{ left: level.position + '%' }"
            >
              <view class="marker-dot"></view>
              <view class="marker-icon">
                <image :src="level.icon" class="level-icon" />
              </view>
            </view>
          </view>

          <!-- 进度标签 -->
          <view class="progress-labels">
            <view
              v-for="(level, index) in rankLevels"
              :key="'label-' + index"
              class="progress-label-item"
              :style="{ left: level.position + '%' }"
            >
              <text class="label-number">{{ level.requirement }}</text>
              <text class="label-text">{{ level.name }}</text>
            </view>
          </view>
        </view>

        <!-- 当前段位信息 -->
        <view class="current-rank-info">
          <view class="rank-badge">
            <image :src="currentRank.icon" class="current-rank-icon" />
            <text class="current-rank-name">{{ currentRank.name }}</text>
          </view>
          <view class="rank-progress-text">
            <text class="progress-text">
              {{ inviteCount >= maxProgress ? '已达到最高段位！' : '还需邀请 ' + (nextTarget - inviteCount) + ' 位好友升级到' + nextRankName }}
            </text>
          </view>
        </view>
      </view>

      <!-- 奖励等级 -->
      <view class="rewards-list">
        <view class="rewards-header">
          <text class="rewards-title">奖励等级</text>
          <text class="rewards-subtitle">完成邀请任务，解锁更多奖励</text>
        </view>

        <!-- 铜级奖励 -->
        <view class="reward-card completed" @click="showRewardDetail('bronze')">
          <view class="reward-badge completed-badge">
            <image src="/static/images/invite/check-icon.png" class="badge-icon" />
          </view>
          <view class="reward-content">
            <view class="reward-header">
              <image src="/static/images/invite/bronze-badge@3x.png" class="reward-icon" />
              <view class="reward-info">
                <text class="reward-title">铜级奖励</text>
                <text class="reward-requirement">邀请 5 位好友</text>
              </view>
            </view>
            <view class="reward-benefits">
              <view class="benefit-row">
                <text class="benefit-mini-icon">💰</text>
                <text class="benefit-amount">19.8 USDT</text>
              </view>
              <view class="benefit-row">
                <image src="@/static/images/user/icon-vip-badge.png" class="benefit-mini-icon" />
                <text class="benefit-amount">5天VIP</text>
              </view>
            </view>
            <view class="reward-status-wrapper">
              <text class="reward-status completed-status">已完成</text>
              <view class="status-glow"></view>
            </view>
          </view>
        </view>

        <!-- 银级奖励 -->
        <view class="reward-card current" @click="showRewardDetail('silver')">
          <view class="reward-badge current-badge">
            <view class="progress-ring">
              <view class="progress-fill" :style="{ transform: 'rotate(' + silverProgress + 'deg)' }"></view>
            </view>
            <text class="badge-text">{{ Math.floor((inviteCount / 10) * 100) }}%</text>
          </view>
          <view class="reward-content">
            <view class="reward-header">
              <image src="/static/images/invite/silver-badge@3x.png" class="reward-icon" />
              <view class="reward-info">
                <text class="reward-title">银级奖励</text>
                <text class="reward-requirement">邀请 10 位好友</text>
              </view>
            </view>
            <view class="reward-benefits">
              <view class="benefit-row">
                <text class="benefit-mini-icon">💰</text>
                <text class="benefit-amount">29.7 USDT</text>
              </view>
              <view class="benefit-row">
                <image src="@/static/images/user/icon-vip-badge.png" class="benefit-mini-icon" />
                <text class="benefit-amount">10天VIP</text>
              </view>
            </view>
            <view class="reward-status-wrapper">
              <text class="reward-progress current-progress">{{ inviteCount }}/10</text>
              <text class="progress-tip">还差 {{ Math.max(0, 10 - inviteCount) }} 位好友</text>
            </view>
          </view>
        </view>

        <!-- 金级奖励 -->
        <view class="reward-card locked" @click="showRewardDetail('gold')">
          <view class="reward-badge locked-badge">
            <text class="badge-icon">🔒</text>
          </view>
          <view class="reward-content">
            <view class="reward-header">
              <image src="/static/images/invite/gold-badge@3x.png" class="reward-icon" />
              <view class="reward-info">
                <text class="reward-title">金级奖励</text>
                <text class="reward-requirement">邀请 20 位好友</text>
              </view>
            </view>
            <view class="reward-benefits">
              <view class="benefit-row">
                <text class="benefit-mini-icon">💰</text>
                <text class="benefit-amount">39.6 USDT</text>
              </view>
              <view class="benefit-row">
                <image src="@/static/images/user/icon-vip-badge.png" class="benefit-mini-icon" />
                <text class="benefit-amount">15天VIP</text>
              </view>
            </view>
            <view class="reward-status-wrapper">
              <text class="reward-progress locked-progress">{{ inviteCount }}/20</text>
              <text class="progress-tip">解锁最高奖励</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 邀请好友加入 -->
      <view class="invite-join-card">
        <view class="join-header">
          <view class="header-content">
            <text class="header-icon">🌐</text>
            <text class="join-title">邀请好友加入</text>
          </view>
          <text class="join-subtitle">分享你的专属邀请链接</text>
        </view>

        <view class="join-content">
          <!-- 邀请链接 -->
          <view class="invite-link-section">
            <view class="link-header">
              <text class="section-icon">🔗</text>
              <text class="section-title">专属邀请链接</text>
            </view>
            <view class="invite-link-row">
              <view class="link-content">
                <text class="invite-link">{{ inviteLink }}</text>
                <view class="link-decoration"></view>
              </view>
              <view class="copy-btn" @click="copyInviteLink">
                <text class="copy-icon">📋</text>
                <text class="copy-text">复制</text>
              </view>
            </view>
          </view>

          <!-- 二维码 -->
          <view class="qr-code-section">
            <view class="qr-header">
              <text class="section-icon">📱</text>
              <text class="section-title">扫码邀请</text>
            </view>
            <view class="qr-code-container">
              <view class="qr-wrapper">
                <canvas
                  canvas-id="qrcode"
                  class="qr-code"
                  :style="{ width: qrSize + 'px', height: qrSize + 'px' }"
                ></canvas>
                <view class="qr-overlay">
                  <text class="qr-logo">💰</text>
                </view>
              </view>
              <view class="qr-actions">
                <view class="qr-action-btn" @click="saveQRCode">
                  <text class="action-icon">💾</text>
                  <text class="action-text">保存图片</text>
                </view>
                <view class="qr-action-btn" @click="shareQRCode">
                  <text class="action-icon">📤</text>
                  <text class="action-text">分享二维码</text>
                </view>
              </view>
            </view>
          </view>

          <!-- 分享方式 -->
          <view class="share-methods">
            <text class="share-title">选择分享方式</text>
            <view class="share-buttons">
              <view class="share-btn" @click="shareToWeChat">
                <text class="share-btn-icon">📱</text>
                <text class="share-btn-text">微信好友</text>
              </view>
              <view class="share-btn" @click="shareToMoments">
                <text class="share-btn-icon">🌐</text>
                <text class="share-btn-text">朋友圈</text>
              </view>
              <view class="share-btn" @click="shareToMore">
                <text class="share-btn-icon">📤</text>
                <text class="share-btn-text">更多</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: 'InvitePage',
  data() {
    return {
      inviteCount: 12,
      maxProgress: 20,
      totalEarnings: '1,248.6',
      qrSize: 200,
      inviteLink: 'invite.yourapp.com/ref/XP8K292',

      // 统计数据
      recentInvites: 3,
      recentEarnings: '45.2',

      // 段位等级配置
      rankLevels: [
        {
          name: '铜级',
          requirement: 0,
          position: 0,
          icon: '@/static/images/invite/bronze-badge@3x.png',
          color: '#CD7F32',
          bgColor: 'rgba(205, 127, 50, 0.1)'
        },
        {
          name: '铜级',
          requirement: 5,
          position: 25,
          icon: '@/static/images/invite/bronze-badge@3x.png',
          color: '#CD7F32',
          bgColor: 'rgba(205, 127, 50, 0.1)'
        },
        {
          name: '银级',
          requirement: 10,
          position: 50,
          icon: '@/static/images/invite/silver-badge@3x.png',
          color: '#C0C0C0',
          bgColor: 'rgba(192, 192, 192, 0.1)'
        },
        {
          name: '银级',
          requirement: 15,
          position: 75,
          icon: '@/static/images/invite/silver-badge@3x.png',
          color: '#C0C0C0',
          bgColor: 'rgba(192, 192, 192, 0.1)'
        },
        {
          name: '金级',
          requirement: 20,
          position: 100,
          icon: '@/static/images/invite/gold-badge@3x.png',
          color: '#FFD700',
          bgColor: 'rgba(255, 215, 0, 0.1)'
        }
      ],

      // 奖励等级
      rewardLevels: [
        {
          icon: '@/static/images/invite/bronze-badge@3x.png',
          title: '铜级奖励',
          description: '邀请5位好友并解锁高级服务将获得分成奖励',
          progress: '已完成',
          completed: true,
          current: false,
        },
        {
          icon: '@/static/images/invite/silver-badge@3x.png',
          title: '银级奖励',
          description: '邀请10位好友并解锁高级服务将获得分成奖励',
          progress: '12/10',
          completed: false,
          current: true,
        },
        {
          icon: '@/static/images/invite/gold-badge@3x.png',
          title: '金级奖励',
          description: '邀请20位好友并解锁高级服务将获得分成奖励',
          progress: '12/20',
          completed: false,
          current: false,
        },
      ],
    }
  },

  computed: {
    // 计算进度百分比
    progressPercentage() {
      return Math.min((this.inviteCount / this.maxProgress) * 100, 100)
    },

    // 获取当前段位
    currentRank() {
      let currentRank = this.rankLevels[0]
      for (let i = this.rankLevels.length - 1; i >= 0; i--) {
        if (this.inviteCount >= this.rankLevels[i].requirement) {
          currentRank = this.rankLevels[i]
          break
        }
      }
      return currentRank
    },

    // 获取下一个目标
    nextTarget() {
      for (let level of this.rankLevels) {
        if (this.inviteCount < level.requirement) {
          return level.requirement
        }
      }
      return this.maxProgress
    },

    // 获取下一个段位名称
    nextRankName() {
      for (let level of this.rankLevels) {
        if (this.inviteCount < level.requirement) {
          return level.name
        }
      }
      return '最高段位'
    },

    // 银级进度角度（用于圆形进度条）
    silverProgress() {
      return Math.min((this.inviteCount / 10) * 360, 360)
    }
  },

  onLoad() {
    this.generateQRCode()
  },

  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack()
    },

    // 立即邀请
    inviteFriends() {
      uni.showActionSheet({
        itemList: ['分享到微信', '分享到朋友圈', '复制邀请链接', '保存二维码'],
        success: res => {
          switch (res.tapIndex) {
            case 0:
              this.shareToWeChat()
              break
            case 1:
              this.shareToMoments()
              break
            case 2:
              this.copyInviteLink()
              break
            case 3:
              this.saveQRCode()
              break
          }
        },
      })
    },

    // 分享到微信
    shareToWeChat() {
      uni.share({
        provider: 'weixin',
        scene: 'WXSceneSession',
        type: 0,
        href: this.inviteLink,
        title: '邀请你加入我们的平台',
        summary: '每成功邀请一位好友并解锁高级服务，将获得现金奖励',
        imageUrl: '@/static/images/invite/invite-bg@3x.png',
        success: () => {
          uni.showToast({
            title: '分享成功',
            icon: 'none',
          })
        },
        fail: err => {
          console.error('分享失败:', err)
          uni.showToast({
            title: '分享失败',
            icon: 'none',
          })
        },
      })
    },

    // 分享到朋友圈
    shareToMoments() {
      uni.share({
        provider: 'weixin',
        scene: 'WXSceneTimeline',
        type: 0,
        href: this.inviteLink,
        title: '邀请你加入我们的平台，一起赚取收益！',
        imageUrl: '@/static/images/invite/invite-bg@3x.png',
        success: () => {
          uni.showToast({
            title: '分享成功',
            icon: 'none',
          })
        },
        fail: err => {
          console.error('分享失败:', err)
          uni.showToast({
            title: '分享失败',
            icon: 'none',
          })
        },
      })
    },

    // 复制邀请链接
    copyInviteLink() {
      uni.setClipboardData({
        data: this.inviteLink,
        success: () => {
          uni.showToast({
            title: '复制成功',
            icon: 'none',
          })
        },
        fail: () => {
          uni.showToast({
            title: '复制失败',
            icon: 'none',
          })
        },
      })
    },

    // 生成二维码
    generateQRCode() {
      // 这里可以使用第三方二维码生成库
      // 或者调用后端API生成二维码
      const ctx = uni.createCanvasContext('qrcode', this)

      // 设置白色背景
      ctx.setFillStyle('#FFFFFF')
      ctx.fillRect(0, 0, this.qrSize, this.qrSize)

      // 绘制更真实的二维码样式
      ctx.setFillStyle('#000000')
      const blockSize = this.qrSize / 25

      // 模拟二维码的模式
      const pattern = [
        '1111111010010111111',
        '1000001010101000001',
        '1011101111101011101',
        '1011101010101011101',
        '1011101011101011101',
        '1000001010101000001',
        '1111111010101111111',
        '0000000110000000000',
        '1101010111011010110',
        '0101110101101110101',
        '1010101010101010101',
        '0101010111010101010',
        '1010101010101010101',
        '0101010101010101010',
        '1010101010101010101',
        '0000000110101001010',
        '1111111010110101111',
        '1000001011110100001',
        '1011101001010111101',
        '1011101101101011101',
        '1011101010101011101',
        '1000001110101000001',
        '1111111101011111111'
      ]

      // 绘制二维码
      for (let i = 0; i < pattern.length && i < 23; i++) {
        const row = pattern[i]
        for (let j = 0; j < row.length && j < 19; j++) {
          if (row[j] === '1') {
            ctx.fillRect(j * blockSize + blockSize * 3, i * blockSize + blockSize * 3, blockSize, blockSize)
          }
        }
      }

      ctx.draw()
    },

    // 保存二维码
    saveQRCode() {
      uni.canvasToTempFilePath(
        {
          canvasId: 'qrcode',
          success: res => {
            uni.saveImageToPhotosAlbum({
              filePath: res.tempFilePath,
              success: () => {
                uni.showToast({
                  title: '保存成功',
                  icon: 'none',
                })
              },
              fail: () => {
                uni.showToast({
                  title: '保存失败',
                  icon: 'none',
                })
              },
            })
          },
          fail: () => {
            uni.showToast({
              title: '生成图片失败',
              icon: 'none',
            })
          },
        },
        this,
      )
    },

    // 显示奖励详情
    showRewardDetail(level) {
      const rewardInfo = {
        bronze: {
          title: '铜级奖励详情',
          content: '邀请5位好友并解锁高级服务，即可获得：\n• 19.8 USDT 现金奖励\n• 5天高级服务特权\n• 永久收益分成权益',
          status: this.inviteCount >= 5 ? 'completed' : 'locked'
        },
        silver: {
          title: '银级奖励详情',
          content: '邀请10位好友并解锁高级服务，即可获得：\n• 29.7 USDT 现金奖励\n• 10天高级服务特权\n• 更高收益分成比例',
          status: this.inviteCount >= 10 ? 'completed' : 'current'
        },
        gold: {
          title: '金级奖励详情',
          content: '邀请20位好友并解锁高级服务，即可获得：\n• 39.6 USDT 现金奖励\n• 15天高级服务特权\n• 最高级收益分成权益',
          status: this.inviteCount >= 20 ? 'completed' : 'locked'
        }
      }

      const info = rewardInfo[level]
      if (info) {
        uni.showModal({
          title: info.title,
          content: info.content,
          showCancel: false,
          confirmText: '知道了',
          confirmColor: '#00D4AA'
        })
      }
    },

    // 分享二维码
    shareQRCode() {
      uni.canvasToTempFilePath({
        canvasId: 'qrcode',
        success: (res) => {
          uni.share({
            provider: 'weixin',
            scene: 'WXSceneSession',
            type: 2,
            imageUrl: res.tempFilePath,
            success: () => {
              uni.showToast({
                title: '分享成功',
                icon: 'none'
              })
            },
            fail: (err) => {
              console.error('分享失败:', err)
              uni.showToast({
                title: '分享失败',
                icon: 'none'
              })
            }
          })
        },
        fail: () => {
          uni.showToast({
            title: '生成图片失败',
            icon: 'none'
          })
        }
      }, this)
    },

    // 更多分享方式
    shareToMore() {
      uni.showActionSheet({
        itemList: ['复制链接', '分享到QQ', '分享到微博', '发送邮件'],
        success: (res) => {
          switch (res.tapIndex) {
            case 0:
              this.copyInviteLink()
              break
            case 1:
              this.shareToQQ()
              break
            case 2:
              this.shareToWeibo()
              break
            case 3:
              this.shareByEmail()
              break
          }
        }
      })
    },

    // 分享到QQ
    shareToQQ() {
      uni.share({
        provider: 'qq',
        type: 0,
        href: this.inviteLink,
        title: '邀请你加入我们的投资平台',
        summary: '获得专业的投资建议和丰厚的奖励',
        imageUrl: '/static/images/invite/invite-bg@3x.png',
        success: () => {
          uni.showToast({
            title: '分享成功',
            icon: 'none'
          })
        },
        fail: (err) => {
          console.error('分享失败:', err)
          uni.showToast({
            title: '分享失败',
            icon: 'none'
          })
        }
      })
    },

    // 分享到微博
    shareToWeibo() {
      const content = '我在使用这个超棒的投资平台，邀请你一起加入！' + this.inviteLink
      uni.share({
        provider: 'sinaweibo',
        type: 0,
        summary: content,
        success: () => {
          uni.showToast({
            title: '分享成功',
            icon: 'none'
          })
        },
        fail: (err) => {
          console.error('分享失败:', err)
          uni.showToast({
            title: '分享失败',
            icon: 'none'
          })
        }
      })
    },

    // 邮件分享
    shareByEmail() {
      const subject = '邀请你加入投资平台'
      const body = '我想邀请你加入这个优秀的投资平台，通过我的邀请链接注册可以获得额外奖励：' + this.inviteLink
      const mailtoUrl = 'mailto:?subject=' + encodeURIComponent(subject) + '&body=' + encodeURIComponent(body)

      // #ifdef H5
      window.open(mailtoUrl)
      // #endif

      // #ifndef H5
      uni.showToast({
        title: '请在邮件应用中分享',
        icon: 'none'
      })
      // #endif
    },
  },
}
</script>

<style lang="scss" scoped>
.invite-container {
  min-height: 100vh;
  background-color: #f5f7fa;
}
  .back-icon {
    width: 17rpx;
    height: 30rpx;  
  }
// 头部导航
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  padding-top: calc(var(--status-bar-height) + 20rpx);
  background-color: #fff;



  .header-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
  }

  .header-placeholder {
    width: 40rpx;
  }
}

// 内容区域
.content {
  height: calc(100vh - 120rpx);
  padding: 30rpx;
}

// 邀请卡片
.invite-card {
  position: relative;
  padding: 40rpx 30rpx;
  margin-bottom: 30rpx;
  background: linear-gradient(135deg, #00D4AA 0%, #00B894 50%, #1DD1A1 100%);
  border-radius: 24rpx;
  overflow: hidden;

  .invite-bg-decoration {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;

    .decoration-circle {
      position: absolute;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.1);

      &.circle-1 {
        width: 120rpx;
        height: 120rpx;
        top: -60rpx;
        right: -60rpx;
        animation: float 6s ease-in-out infinite;
      }

      &.circle-2 {
        width: 80rpx;
        height: 80rpx;
        bottom: -40rpx;
        left: -40rpx;
        animation: float 8s ease-in-out infinite reverse;
      }

      &.circle-3 {
        width: 40rpx;
        height: 40rpx;
        top: 30%;
        right: 20%;
        animation: float 10s ease-in-out infinite;
      }
    }
  }

  .invite-content {
    position: relative;
    z-index: 1;

    .invite-icon-wrapper {
      text-align: center;
      margin-bottom: 20rpx;

      .invite-icon {
        width: 80rpx;
        height: 80rpx;
      }
    }

    .invite-title {
      display: block;
      margin-bottom: 16rpx;
      font-size: 48rpx;
      font-weight: 700;
      color: #fff;
      text-align: center;
      text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
    }

    .invite-desc {
      display: block;
      margin-bottom: 30rpx;
      font-size: 28rpx;
      line-height: 1.6;
      color: rgba(255, 255, 255, 0.95);
      text-align: center;
    }

    .invite-benefits {
      display: flex;
      justify-content: space-around;
      margin-bottom: 30rpx;

      .benefit-item {
        display: flex;
        flex-direction: column;
        align-items: center;

        .benefit-icon {
          font-size: 32rpx;
          margin-bottom: 8rpx;
          line-height: 1;
        }

        .benefit-icon-img {
          width: 32rpx;
          height: 32rpx;
          margin-bottom: 8rpx;
        }
      }
    }

    .benefit-mini-icon {
      font-size: 24rpx;
      margin-right: 8rpx;
      line-height: 1;

      &[src] {
        width: 24rpx;
        height: 24rpx;
        margin-right: 8rpx;
      }
    }

    .header-icon, .section-icon {
      font-size: 24rpx;
      margin-right: 12rpx;
      line-height: 1;
    }

    .copy-icon, .action-icon {
      font-size: 20rpx;
      margin-right: 8rpx;
      line-height: 1;
    }

    .share-btn-icon {
      font-size: 32rpx;
      margin-bottom: 8rpx;
      line-height: 1;
    }

    .badge-icon, .qr-logo {
      font-size: 32rpx;
      line-height: 1;
    }

    .invite-btn {
      position: relative;
      width: 320rpx;
      margin: 0 auto;
      border-radius: 50rpx;
      overflow: hidden;

      .btn-content {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20rpx 30rpx;
        background: rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(10rpx);
        border: 2rpx solid rgba(255, 255, 255, 0.3);

        .btn-icon {
          font-size: 28rpx;
          margin-right: 12rpx;
          line-height: 1;
        }

        .invite-btn-text {
          font-size: 28rpx;
          font-weight: 600;
          color: #fff;
        }
      }

      .btn-glow {
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        animation: glow 2s infinite;
      }

      &:active .btn-content {
        transform: scale(0.98);
        background: rgba(255, 255, 255, 0.2);
      }
    }
  }
}

// 统计信息
.stats-section {
  display: flex;
  align-items: center;
  padding: 30rpx;
  margin-bottom: 30rpx;
  background: #fff;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);

  .stats-item {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 20rpx;

    .stats-icon-wrapper {
      width: 60rpx;
      height: 60rpx;
      margin-right: 20rpx;
      background: linear-gradient(135deg, #00D4AA 0%, #00B894 100%);
      border-radius: 16rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      .stats-icon {
        width: 32rpx;
        height: 32rpx;
      }
    }

    .stats-content {
      flex: 1;

      .stats-number {
        display: block;
        margin-bottom: 4rpx;
        font-size: 44rpx;
        font-weight: 700;
        color: #333;
        line-height: 1;
      }

      .stats-label {
        font-size: 24rpx;
        color: #666;
      }
    }

    .stats-trend {
      display: flex;
      flex-direction: column;
      align-items: center;

      .trend-icon {
        width: 20rpx;
        height: 20rpx;
        margin-bottom: 4rpx;
      }

      .trend-text {
        font-size: 20rpx;
        color: #00D4AA;
        font-weight: 600;
      }

      &.up .trend-text {
        color: #00D4AA;
      }

      &.down .trend-text {
        color: #FF6B6B;
      }
    }
  }

  .stats-divider {
    width: 1rpx;
    height: 60rpx;
    background: linear-gradient(to bottom, transparent, #E0E0E0, transparent);
    margin: 0 10rpx;
  }
}

// 实验部分
.experiment-section {
  padding: 30rpx;
  margin-bottom: 30rpx;
  background-color: #fff;
  border-radius: 20rpx;

  .experiment-header {
    margin-bottom: 30rpx;
  }

  .section-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
  }

  .progress-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20rpx;

    .progress-label {
      font-size: 28rpx;
      color: #666;
    }

    .progress-value {
      font-size: 28rpx;
      font-weight: 600;
      color: #00d4aa;
    }
  }

  // 段位进度条容器
  .rank-progress-container {
    position: relative;
    margin-bottom: 40rpx;

    .progress-track {
      position: relative;
      height: 20rpx;
      margin: 40rpx 0 60rpx;
      background: linear-gradient(90deg, #E8F5F3 0%, #D1F2E8 25%, #B8E6D2 50%, #9FDAB8 75%, #85CE9F 100%);
      border-radius: 10rpx;
      overflow: visible;

      .progress-fill {
        height: 100%;
        background: linear-gradient(90deg, #00D4AA 0%, #00B894 50%, #FFD700 100%);
        border-radius: 10rpx;
        transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;

        &::after {
          content: '';
          position: absolute;
          top: 0;
          right: 0;
          width: 4rpx;
          height: 100%;
          background: rgba(255, 255, 255, 0.3);
          border-radius: 0 10rpx 10rpx 0;
        }
      }

      // 段位标记点
      .rank-marker {
        position: absolute;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        z-index: 10;

        .marker-dot {
          width: 32rpx;
          height: 32rpx;
          background-color: #E0E0E0;
          border: 4rpx solid #fff;
          border-radius: 50%;
          transition: all 0.3s ease;
          box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
        }

        .marker-icon {
          position: absolute;
          top: -60rpx;
          left: 50%;
          transform: translateX(-50%);
          opacity: 0;
          transition: all 0.3s ease;

          .level-icon {
            width: 48rpx;
            height: 48rpx;
            border-radius: 50%;
            box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
          }
        }

        &.completed {
          .marker-dot {
            background: linear-gradient(135deg, #00D4AA 0%, #00B894 100%);
            border-color: #fff;
            box-shadow: 0 4rpx 12rpx rgba(0, 212, 170, 0.3);
          }

          .marker-icon {
            opacity: 1;
            transform: translateX(-50%) translateY(-10rpx);
          }
        }

        &.current {
          .marker-dot {
            background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
            border-color: #fff;
            box-shadow: 0 4rpx 16rpx rgba(255, 215, 0, 0.4);
            animation: pulse 2s infinite;
          }

          .marker-icon {
            opacity: 1;
            transform: translateX(-50%) translateY(-10rpx);
            animation: bounce 1s infinite;
          }
        }
      }
    }

    // 进度标签
    .progress-labels {
      position: relative;
      height: 80rpx;

      .progress-label-item {
        position: absolute;
        transform: translateX(-50%);
        text-align: center;

        .label-number {
          display: block;
          font-size: 24rpx;
          font-weight: 600;
          color: #00D4AA;
          margin-bottom: 4rpx;
        }

        .label-text {
          display: block;
          font-size: 20rpx;
          color: #666;
          white-space: nowrap;
        }
      }
    }
  }

  // 当前段位信息
  .current-rank-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24rpx;
    background: linear-gradient(135deg, rgba(0, 212, 170, 0.1) 0%, rgba(0, 184, 148, 0.1) 100%);
    border-radius: 16rpx;
    border: 2rpx solid rgba(0, 212, 170, 0.2);

    .rank-badge {
      display: flex;
      align-items: center;

      .current-rank-icon {
        width: 40rpx;
        height: 40rpx;
        margin-right: 12rpx;
        border-radius: 50%;
      }

      .current-rank-name {
        font-size: 28rpx;
        font-weight: 600;
        color: #00D4AA;
      }
    }

    .rank-progress-text {
      flex: 1;
      text-align: right;

      .progress-text {
        font-size: 24rpx;
        color: #666;
        line-height: 1.4;
      }
    }
  }

  // 动画效果
  @keyframes pulse {
    0%, 100% {
      transform: translateX(-50%) translateY(-50%) scale(1);
    }
    50% {
      transform: translateX(-50%) translateY(-50%) scale(1.1);
    }
  }

  @keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
      transform: translateX(-50%) translateY(-10rpx);
    }
    40% {
      transform: translateX(-50%) translateY(-20rpx);
    }
    60% {
      transform: translateX(-50%) translateY(-15rpx);
    }
  }

  // 新增动画效果
  @keyframes float {
    0%, 100% {
      transform: translateY(0rpx);
    }
    50% {
      transform: translateY(-20rpx);
    }
  }

  @keyframes glow {
    0% {
      left: -100%;
    }
    100% {
      left: 100%;
    }
  }

  @keyframes glow-pulse {
    0%, 100% {
      opacity: 0.3;
      transform: translate(-50%, -50%) scale(1);
    }
    50% {
      opacity: 0.6;
      transform: translate(-50%, -50%) scale(1.1);
    }
  }
}

// 奖励列表
.rewards-list {
  margin-bottom: 30rpx;

  .rewards-header {
    margin-bottom: 30rpx;
    text-align: center;

    .rewards-title {
      display: block;
      font-size: 36rpx;
      font-weight: 700;
      color: #333;
      margin-bottom: 8rpx;
    }

    .rewards-subtitle {
      font-size: 24rpx;
      color: #666;
    }
  }

  .reward-card {
    position: relative;
    padding: 30rpx;
    margin-bottom: 20rpx;
    background: #fff;
    border-radius: 20rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;

    &:active {
      transform: scale(0.98);
    }

    &.completed {
      background: linear-gradient(135deg, rgba(0, 212, 170, 0.1) 0%, rgba(0, 184, 148, 0.1) 100%);
      border: 2rpx solid rgba(0, 212, 170, 0.3);
    }

    &.current {
      background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 165, 0, 0.1) 100%);
      border: 2rpx solid rgba(255, 215, 0, 0.5);
      box-shadow: 0 8rpx 30rpx rgba(255, 215, 0, 0.2);
    }

    &.locked {
      background: #f8f9fa;
      border: 2rpx solid #e9ecef;
    }

    .reward-badge {
      position: absolute;
      top: -10rpx;
      right: 20rpx;
      width: 60rpx;
      height: 60rpx;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;

      &.completed-badge {
        background: linear-gradient(135deg, #00D4AA 0%, #00B894 100%);
        box-shadow: 0 4rpx 12rpx rgba(0, 212, 170, 0.3);

        .badge-icon {
          width: 24rpx;
          height: 24rpx;
        }
      }

      &.current-badge {
        background: #fff;
        border: 4rpx solid #FFD700;
        box-shadow: 0 4rpx 12rpx rgba(255, 215, 0, 0.3);

        .progress-ring {
          position: absolute;
          width: 100%;
          height: 100%;
          border-radius: 50%;
          overflow: hidden;

          .progress-fill {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: conic-gradient(#FFD700 0deg, #FFD700 0deg, transparent 0deg);
            transform-origin: center;
            transition: transform 0.8s ease;
          }
        }

        .badge-text {
          font-size: 20rpx;
          font-weight: 700;
          color: #FFD700;
          z-index: 1;
        }
      }

      &.locked-badge {
        background: #e9ecef;
        border: 2rpx solid #dee2e6;

        .badge-icon {
          width: 24rpx;
          height: 24rpx;
        }
      }
    }

    .reward-content {
      .reward-header {
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;

        .reward-icon {
          width: 80rpx;
          height: 80rpx;
          margin-right: 20rpx;
          border-radius: 50%;
          box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
        }

        .reward-info {
          flex: 1;

          .reward-title {
            display: block;
            font-size: 32rpx;
            font-weight: 700;
            color: #333;
            margin-bottom: 8rpx;
          }

          .reward-requirement {
            font-size: 24rpx;
            color: #666;
          }
        }
      }

      .reward-benefits {
        display: flex;
        gap: 20rpx;
        margin-bottom: 20rpx;

        .benefit-row {
          display: flex;
          align-items: center;
          padding: 12rpx 16rpx;
          background: rgba(0, 212, 170, 0.1);
          border-radius: 20rpx;

          .benefit-mini-icon {
            width: 20rpx;
            height: 20rpx;
            margin-right: 8rpx;
          }

          .benefit-amount {
            font-size: 24rpx;
            font-weight: 600;
            color: #00D4AA;
          }
        }
      }

      .reward-status-wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .completed-status {
          position: relative;
          font-size: 28rpx;
          font-weight: 700;
          color: #00D4AA;

          .status-glow {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 120%;
            height: 120%;
            background: radial-gradient(circle, rgba(0, 212, 170, 0.2) 0%, transparent 70%);
            border-radius: 50%;
            animation: glow-pulse 2s infinite;
          }
        }

        .current-progress {
          font-size: 28rpx;
          font-weight: 700;
          color: #FFD700;
        }

        .locked-progress {
          font-size: 28rpx;
          font-weight: 600;
          color: #999;
        }

        .progress-tip {
          font-size: 20rpx;
          color: #666;
        }
      }
    }
  }
}

// 邀请加入卡片
.invite-join-card {
  overflow: hidden;
  background: linear-gradient(135deg, #00D4AA 0%, #00B894 100%);
  border-radius: 24rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 212, 170, 0.3);

  .join-header {
    padding: 40rpx 30rpx 30rpx;
    text-align: center;

    .header-content {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 12rpx;

      .header-icon {
        width: 32rpx;
        height: 32rpx;
        margin-right: 12rpx;
      }

      .join-title {
        font-size: 36rpx;
        font-weight: 700;
        color: #fff;
      }
    }

    .join-subtitle {
      font-size: 26rpx;
      color: rgba(255, 255, 255, 0.9);
    }
  }

  .join-content {
    padding: 30rpx;
    background: #fff;
    border-radius: 24rpx 24rpx 0 0;

    // 邀请链接部分
    .invite-link-section {
      margin-bottom: 30rpx;

      .link-header {
        display: flex;
        align-items: center;
        margin-bottom: 16rpx;

        .section-icon {
          width: 24rpx;
          height: 24rpx;
          margin-right: 12rpx;
        }

        .section-title {
          font-size: 28rpx;
          font-weight: 600;
          color: #333;
        }
      }

      .invite-link-row {
        display: flex;
        align-items: center;
        padding: 20rpx;
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        border-radius: 16rpx;
        border: 2rpx solid #e9ecef;

        .link-content {
          flex: 1;
          position: relative;
          overflow: hidden;

          .invite-link {
            font-size: 24rpx;
            color: #333;
            font-family: 'Monaco', 'Menlo', monospace;
          }

          .link-decoration {
            position: absolute;
            bottom: 0;
            left: 0;
            height: 2rpx;
            width: 100%;
            background: linear-gradient(90deg, #00D4AA 0%, #00B894 100%);
            border-radius: 1rpx;
          }
        }

        .copy-btn {
          display: flex;
          align-items: center;
          padding: 12rpx 20rpx;
          margin-left: 20rpx;
          background: linear-gradient(135deg, #00D4AA 0%, #00B894 100%);
          border-radius: 20rpx;
          box-shadow: 0 4rpx 12rpx rgba(0, 212, 170, 0.3);
          transition: all 0.3s ease;

          &:active {
            transform: scale(0.95);
          }

          .copy-icon {
            width: 20rpx;
            height: 20rpx;
            margin-right: 8rpx;
          }

          .copy-text {
            font-size: 24rpx;
            font-weight: 600;
            color: #fff;
          }
        }
      }
    }

    // 二维码部分
    .qr-code-section {
      margin-bottom: 30rpx;

      .qr-header {
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;

        .section-icon {
          width: 24rpx;
          height: 24rpx;
          margin-right: 12rpx;
        }

        .section-title {
          font-size: 28rpx;
          font-weight: 600;
          color: #333;
        }
      }

      .qr-code-container {
        text-align: center;

        .qr-wrapper {
          position: relative;
          display: inline-block;
          margin-bottom: 20rpx;

          .qr-code {
            background: #fff;
            border: 8rpx solid #fff;
            border-radius: 20rpx;
            box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
          }

          .qr-overlay {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);

            .qr-logo {
              width: 48rpx;
              height: 48rpx;
              border-radius: 50%;
              background: #fff;
              box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
            }
          }
        }

        .qr-actions {
          display: flex;
          justify-content: center;
          gap: 20rpx;

          .qr-action-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 16rpx 24rpx;
            background: linear-gradient(135deg, rgba(0, 212, 170, 0.1) 0%, rgba(0, 184, 148, 0.1) 100%);
            border: 2rpx solid rgba(0, 212, 170, 0.2);
            border-radius: 16rpx;
            transition: all 0.3s ease;

            &:active {
              transform: scale(0.95);
              background: linear-gradient(135deg, rgba(0, 212, 170, 0.2) 0%, rgba(0, 184, 148, 0.2) 100%);
            }

            .action-icon {
              width: 24rpx;
              height: 24rpx;
              margin-bottom: 8rpx;
            }

            .action-text {
              font-size: 22rpx;
              color: #00D4AA;
              font-weight: 600;
            }
          }
        }
      }
    }

    // 分享方式
    .share-methods {
      .share-title {
        display: block;
        font-size: 28rpx;
        font-weight: 600;
        color: #333;
        margin-bottom: 20rpx;
        text-align: center;
      }

      .share-buttons {
        display: flex;
        justify-content: space-around;

        .share-btn {
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 20rpx;
          border-radius: 16rpx;
          transition: all 0.3s ease;

          &:active {
            transform: scale(0.95);
            background: rgba(0, 212, 170, 0.1);
          }

          .share-btn-icon {
            width: 48rpx;
            height: 48rpx;
            margin-bottom: 12rpx;
            border-radius: 50%;
            box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
          }

          .share-btn-text {
            font-size: 24rpx;
            color: #666;
            font-weight: 500;
          }
        }
      }
    }
  }
}
</style>
